<template>
  <div class="layout-home">
    <div class="home-fixed">
      <van-nav-bar class="home-bar" title="盛E签" :border="false" />
      <van-tabs v-model="active" title-active-color="#2489F2">
        <van-tab class="tab-title">
          <template #title>
            <i slot="icon" class="iconfont icon1"></i>
            待我签署
          </template>
          <!-- 文章列表 -->
          <article-list ref="article-list" :channel="0" />
        </van-tab>
        <van-tab
          ><template #title>
            <i slot="icon" class="iconfont icon2"></i>
            待我审批
          </template>
          <!-- 文章列表 -->
          <article-list ref="article-list" :channel="1"
        /></van-tab>
        <van-tab>
          <template #title>
            <i slot="icon" class="iconfont icon3"></i>
            他人操作
          </template>
          <!-- 文章列表 -->
          <article-list ref="article-list" :channel="2"
        /></van-tab>
        <van-tab>
          <template #title>
            <i slot="icon" class="iconfont icon4"></i>
            签约完成
          </template>
          <!-- 文章列表 -->
          <article-list ref="article-list" :channel="3"
        /></van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import ArticleList from './components/article-list'
export default {
  data() {
    return {
      active: 0
    }
  },
  created() {},
  mounted() {},
  methods: {},
  components: {
    ArticleList
  }
}
</script>

<style scoped lang="less">
.layout-home {
  background-color: #f8f8f8;
  padding: 260px 0 98px;
  height: 100vh;
  box-sizing: border-box;
  .home-fixed {
    height: 260px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    .home-bar {
      box-sizing: border-box;
      /deep/.van-nav-bar__title {
        font-size: 34px;
        font-weight: bold;
      }
    }
    .home-tabbar {
      height: 172px;
      i.iconfont {
        font-size: 48px;
      }
    }
    /deep/.van-tabs__wrap {
      height: 172px;
      .van-tab__text--ellipsis {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 26px;
        i {
          font-size: 44px;
          margin-bottom: 19px;
        }
      }
      .van-tabs__line {
        width: 60px;
        height: 5px;
        border-radius: 3px;
        background-color: #2489f2;
      }
    }
  }
}
</style>
